<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Ajax 02 Page</h1>
    <button onclick="doAjaxGet()">Do Ajax Get</button>
    <button onclick="doAjaxPost()">Do Ajax Post</button>
    <button onclick="doAjaxPostJson()">Do Ajax Post Json</button>
    <button onclick="doAjaxDelete()">Do Ajax Delete</button>
    <button onclick="doAjaxPut()">Do Ajax Put</button>
</div>
<div id="result"></div>
<script>
    function doAjaxPut(){
        //1.创建XHR对象
        let xhr=new XMLHttpRequest();
        //2.设置状态监听
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    let div=document.getElementById("result");
                    div.innerHTML=xhr.responseText;
                }
            }
        }
        //3.建立连接
        let params="id=101&city=tianjin"
        xhr.open("put",`http://localhost/doAjaxPut`,true);
        //put请求必须要设置请求头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //4.发送请求
        xhr.send(params);//put请求可以将参数放到send方法内部
    }
    function doAjaxDelete(){
        //1.创建XHR对象
        let xhr=new XMLHttpRequest();
        //2.设置状态监听
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    let div=document.getElementById("result");
                    div.innerHTML=xhr.responseText;
                }
            }
        }
        //3.建立连接
        //let params="b";
        let params="100";
        xhr.open("Delete",`http://localhost/doAjaxDelete/${params}`,true);
        //4.发送请求
        xhr.send(null);
    }
    function doAjaxPostJson(){
        //1.创建XHR对象
        let xhr=new XMLHttpRequest();
        //2.设置状态监听
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    let div=document.getElementById("result");
                    div.innerHTML=xhr.responseText;
                }
            }
        }
        //3.建立连接
        let params={id:103,city:"xianggan"}
        let paramsStr=JSON.stringify(params);//将json对象转换为json字符串
        console.log("jsonStr",paramsStr);
        xhr.open("post",`http://localhost/doAjaxJsonPost`,true);
        //post请求必须要设置请求头
        xhr.setRequestHeader("Content-Type","application/json");
        //4.发送请求
        xhr.send(paramsStr);//post请求可以将参数放到send方法内部
    }
    function doAjaxPost(){
        //1.创建XHR对象
        let xhr=new XMLHttpRequest();
        //2.设置状态监听
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    let div=document.getElementById("result");
                    div.innerHTML=xhr.responseText;
                }
            }
        }
        //3.建立连接
        let params="id=102&city=shenzhen"
        xhr.open("post",`http://localhost/doAjaxPost`,true);
        //post请求必须要设置请求头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //4.发送请求
        xhr.send(params);//post请求可以将参数放到send方法内部
    }

    function doAjaxGet(){
        //1.创建XHR对象
        let xhr=new XMLHttpRequest();
        //2.设置状态监听
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    let div=document.getElementById("result");
                    div.innerHTML=xhr.responseText;
                }
            }
        }
        //3.建立连接
        //let params="b";
        let params="";
        xhr.open("Get",`http://localhost/doAjaxGet/${params}`,true);
        //4.发送请求
        xhr.send(null);
    }
</script>

</body>
</html>